<template>
    <view class="abslrtb flex-column a-center wrap">
        <u-navbar title="首次注册" style="margin-bottom: 60rpx;" />
        <view class="topbox flex-column aj-center">
            <image class="logoimg" src="/static/logo.png" mode=""></image>
        </view>
        <view class="form">
            <view class="flex a-center form-item">
                <view class="label">
                    <text>邀请码</text>
                </view>
                <image class="label_icon" src="/static/images/icon_user.png" mode=""></image>
                <view class="label_fgs"></view>
                <view class="flex-1">
                    <input placeholder-class="placeholder" class="qui-input" type="text" v-model="code"
                        placeholder="请输入邀请码" />
                </view>
            </view>
        </view>

        <view class="btns">
            <view class="qbtn" @click="verify">
                <text class="btn-text-color fs30">验证</text>
            </view>
            <!-- <view class="ql-btn" @click="qlLogin">
				<image style="width:64rpx;height: 64rpx;" src="/static/img/qinglu.png"></image><text style="color:#00FFFF">青鹿登录</text>
			</view> -->
            <view class="flex ptb30 mlr20 space-between">

                <view class="" @click="gologin">
                    <text class="fs26 nav-text-color underline">已有账号</text>
                </view>
            </view>
        </view>
        <view class="user-protocal">

            <checkbox-group @change="onUserProtocalChange">
                <checkbox value="userProtocal" :checked="userProtocalCheck" />
            </checkbox-group>已阅读并同意
            <navigator url="../Mine/UserProtocal/UserProtocal">
                <text style="color:royalblue">《用户隐私协议》</text>
            </navigator>

        </view>
    </view>
</template>

<script setup lang="ts">
import uniReq from '@/api/uniReq';
import { ref } from 'vue'

// 响应式数据
const code = ref(''); // 验证码
const userProtocalCheck = ref(false); // 用户隐私协议是否勾选
let countdownTimer: any = null; // 倒计时定时器

// 用户协议勾选状态改变
const onUserProtocalChange = (e: any) => {
    userProtocalCheck.value = e.detail.value.includes('userProtocal');
}

// 表单验证
const validateForm = () => {
    // 验证邀请码
    if (!code.value) {
        uni.showToast({
            title: '请输入邀请码',
            icon: 'none'
        })
        return false;
    }
    return true;
}

// 登录处理
const verify = () => {
    // 检查用户协议
    if (!userProtocalCheck.value) {
        uni.showToast({
            title: '请先同意用户隐私协议',
            icon: 'none'
        })
        return;
    }
    // 表单验证
    if (!validateForm()) {
        return;
    }

    // 显示加载中
    uni.showLoading({
        title: '验证中...'
    })
    try {
        uniReq({
            url: '/auth/verify-code',
            method: 'GET',
            data: {
                code: code.value,
            }
        }).then((res: any) => {
            uni.hideLoading();
            if (res.status === 200) {
                uni.showToast({
                    title: res.message ||'验证成功',
                    icon: 'success'
                })
                // 跳转到注册页面
                uni.navigateTo({
                    url: '/pages/login/register?code=' + res.data
                })
            } else {
                uni.showToast({
                    title: res.message || '验证失败',
                    icon: 'none'
                })
            }
        })
    } catch {
        uni.hideLoading();
        uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
        })
    }


}

const gologin = () => {
    uni.navigateTo({
        url: '/pages/login/login'
    })
}
</script>


<style scoped lang="scss">
@import url("./style/qui_weex.scss");
@import url("./style/skin06.scss");

.user-protocal {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 200rpx;
}

.ql-btn {
    width: 640rpx;
    height: 90rpx;
    border-radius: 50rpx;
    border: solid 1rpx #00FFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    margin-top: 260rpx;
}
</style>